<template>
	<view class="repair-wrap">
		<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;">
			<view style="width: 88%;margin:auto;">
				<view v-if="typeReplace == false">
					<view class="header-li">
						<view style="width: 98px;">
							<view style="margin-top: -8px;">原手机号</view>
						</view>
						<view class="input1">
							<u-input v-model="phone" @blur="login()" placeholder="请输入原手机号" />
						</view>
					</view>
					<view class="header-li">
						<view style="width: 98px;">
							<view style="margin-top: -8px;">验证码</view>
						</view>
						<view class="input1" style="width: 118px;">
							<u-input v-model="verificationCode" placeholder="请输入验证码" />
						</view>
						<view @tap="getCheckNum(1)" style="margin-top: -8px;">
							 <span>{{! codeTime ? '获取验证码': codeTime+'s'}}</span>
						</view>
					</view>
				</view>
				
				<view v-if="typeReplace == true">
					<view class="header-li">
						<view style="width: 98px;">
							<view style="margin-top: -8px;">现手机号</view>
						</view>
						<view class="input1">
							<u-input v-model="oldNumberTow" @blur="login1()" placeholder="请输入原手机号" />
						</view>
					</view>
					<view class="header-li">
						<view style="width: 98px;">
							<view style="margin-top: -8px;">验证码</view>
						</view>
						<view class="input1" style="width: 118px;">
							<u-input v-model="verificationCodeTow" placeholder="请输入验证码" />
						</view>
						<view @tap="getCheckNum(2)" style="margin-top: -8px;">
							 <span>{{! codeTime2 ? '获取验证码': codeTime2+'s'}}</span>
						</view>
					</view>
				</view>
				
				
			</view>
			<view style="margin-top: 30px;padding-bottom: 20px;">
				<button class="yilingqu" @click="pass_blur" v-if="typeReplace != true" >确认信息</button>
				<button class="yilingqu" @click="handleConfirm" v-if="typeReplace == true">确认更换</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTime:0,
				codeTime2:0,
				phone:null,//原手机号
				verificationCode:null,//邀请码
				
				//现有手机号---验证码
				oldNumberTow:null,
				verificationCodeTow:null,
				typeReplace:false,//显示、隐藏
				oldNumberOld:null,
				verificationCodeOld:null,
				user_id:null,
				
			}
		},
		onShow() {
			let _this = this;
			let rawData = uni.getStorageSync('rawData');
			console.log(rawData)
			if (rawData) {
				_this.phone = rawData.userTel
				_this.user_id = rawData.userId
			} else {
				_this.phone = null
				_this.user_id  = null
			}
		
		},
		methods: {
			login(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.phone) {      //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.phone)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
			},
			login1(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.oldNumberTow) {      //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.oldNumberTow)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
			},
			getCheckNum(val){
				if(val == 1){
					if(this.codeTime>0){
						uni.showToast({
							title: '不能重复获取',
							icon:"none"
						});
						return;
					}else{
						this.$request.api.getObtain({
							tel:this.phone
						})
						this.codeTime = 60
						let timer = setInterval(()=>{
							this.codeTime--;
							if(this.codeTime<1){
								clearInterval(timer);
								this.codeTime = 0
							}
						},1000)
					}
				}else{
					if(this.codeTime2>0){
						uni.showToast({
							title: '不能重复获取',
							icon:"none"
						});
						return;
					}else{
						this.$request.api.getObtain({
							tel:this.oldNumberTow
						})
						this.codeTime2 = 60
						let timer = setInterval(()=>{
							this.codeTime2--;
							if(this.codeTime2<1){
								clearInterval(timer);
								this.codeTime2 = 0
							}
						},1000)
					}
				}
				
			},
			//验证原手机号
			pass_blur(){
				if(this.phone){
					this.$request.api.getVerification({
						tel: this.phone,
						code: this.verificationCode,
					}).then(res=>{
						this.typeReplace = true
						this.oldNumberOld=this.phone
						this.verificationCodeOld=this.verificationCode
						this.text_pass_yzm = res.msg;
					})
				}else{
					this.text_pass_yzm = '验证码不能为空';
				}
			},
			//验证验证码
			pass_blur2(){
				if(this.user_tel){
					this.$request.api.getVerification({
						tel: this.oldNumberOld,
						code: this.verificationCodeOld,
						tel1: this.oldNumberTow,
						code2: this.verificationCodeTow,
					}).then(res=>{
						this.text_pass_yzm = res.msg;
					})
				}else{
					this.text_pass_yzm = '验证码不能为空';
				}
				
			},
			//点击确认更换
			handleConfirm(){
				this.pass_blur2()
				this.$request.api.getReplace({
					user_id:this.user_id,
					user_tel:this.oldNumberTow,
					tel: this.oldNumberOld,
					code: this.verificationCodeOld,
					code2: this.verificationCodeTow,
				}).then(res=>{
					if(res.data.code == 0){
						uni.showToast({
						    title: '更换手机号成功，请重新登录！',
						    icon:'success'
						});
					}
					this.loginOut()
				})
			},
			loginOut() {
				let _this = this
				uni.clearStorage();
				this.phone = null;
				this.user_id = null;
				// 进入首页
				uni.clearStorageSync();
				uni.reLaunch({ //跳转页面
					url: "/pages/user/user"
				})
				// _this.$Router.pushTab({
				// 	path: '/pages/index/index'
				// })
			},
			
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.header-name {
		width: 186rpx;
	}
	.form-select {
		width: 480rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
	
</style>
